<template>
	<win-drag ref="popWin" class="mlist" :point="point" :title="popTitle" :show="showPop" @onHide="hHidPop">
		<div class="content">
			<iframe ref="popfram" :src="popUrl" frameborder="0" style="width: 100%;height: 100%;" @load="hFrmDone"></iframe>
		</div>
	</win-drag>
</template>

<script setup>
	import {
		onMounted,
		onUnmounted,
		nextTick,
		computed,
		reactive,
		watch,
		ref,
		toRefs
	} from "vue";

	//事件抛出
	//外层绑定@onFn="hOnFn"
	const emit = defineEmits(['callOut', 'onUnSave']);

	let frmWin;
	const popWin = ref(),
		point = ref({
			x: 0,
			y: 0
		}),
		toolStyle = ref(""),
		devDat = ref(null),
		popTitle = ref(""),
		showPop = ref(false),
		hEvFromIframe = (d) => {
			console.log("工具栏样式", d);
			let dat = d.data;
			switch (dat.h) {
				case "setSize":
					popWin.value.hCallIn["setSize"](dat.dat);
					break;
				case "setPos":
					break;
				case "hidPop":
					hHidPop();
					break;
				case "setToolStyle":
					toolStyle.value = dat.d;
					break;
				default:
					break;
			}
		},
		hHidPop = (t) => {
			showPop.value = false;
			popTitle.value = "";
			devDat.value = null;
		},
		hFrmDone = (e) => {
			frmWin = e.target.contentWindow;
			//		console.log("已加载完毕", frmWin, "数据", devDat);
			if (devDat.value) {
				hPostMessag(devDat.value)
			}
			//t.target.contentWindow..postMessage(message,"");
		},
		hPostMessag = (dat) => {
			frmWin?.postMessage({
				data: dat
			}, "*");
		}


	//触发
	const callOut = (t) => {
			emit('callOut', t);
		},
		callIn = {
			showData: ({
				tit,
				dat
			}) => {
				showPop.value = true;
				devDat.value = dat;
				hPostMessag(devDat.value)
			},
			hide: hHidPop
		};
	//属性导出
	//使用方法 ref="rdom" rdom.value.hFn()
	defineExpose({
		callIn
	});


	//属性定义
	//数据绑定v-bind:dat="dat"  
	//const dat=ref({});
	const props = defineProps({
		dat: {
			type: Object
		},
		popUrl: {
			type: String
		}
	});
	onMounted(() => nextTick(() => {
		window.addEventListener("message", hEvFromIframe, false);
	}));
	//"html/postMessage.html";//
	//popUrl.value = "http://192.168.1.252:5000/modelPage/index.html";
</script>

<style scoped lang="scss">
	.mlist {
		background: linear-gradient(90deg, #00000000 30%, #244a7773 92%, #4d7ec8e3 100%),
			linear-gradient(-90deg, #00000000 30%, #244a7773 92%, #4d7ec8e3 100%),
			linear-gradient(0deg, #00000000 30%, #244a7773 92%, #4d7ec8e3 100%),
			linear-gradient(180deg, #00000000 30%, #244a7773 92%, #4d7ec8e3 100%);

		padding: 6px;

		:deep(button) {
			background: none;
			outline: none;
			box-shadow: none;
			border: 0;
			color: #4CBCD3;
			font-size: 16px;
			font-weight: bold;
		}

		:deep(iframe) {
			outline: none;
			border: 0;
		}
	}

	.mlist .content {
		height: calc(100% - 20px);
		width: calc(100% - 20px);
		padding: 10px;
	}
</style>